<template>
    <el-col :span="24">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleSelect">
            <h5>redefine</h5>
            <template v-for="item in (menuList[index] && menuList[index].subMenuList)">
                <el-submenu v-if="item.subMenuList !== null" :index="item.menuNode">
                    <template slot="title">
                        <!--<i class="el-icon-location"></i>-->
                        <i :class="item.menuIcon"></i>
                        <span :value="item.menuName">{{item.menuName}}</span>
                    </template>
                    <el-menu-item v-for="subItem in item.subMenuList" :key="subItem.menuCode" :index="subItem.menuNode">{{subItem.menuName}}</el-menu-item>
                </el-submenu>
                <el-menu-item v-if="item.subMenuList === null" :index="item.menuNode">
                    <!--<i class="el-icon-menu"></i>-->
                    <i :class="item.menuIcon"></i>
                    <span slot="title" :value="item.menuName">{{item.menuName}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </el-col>
</template>

<script>
    export default {
        name: "el-nav",
        props: {
            menuList: Array,
            index: Number,
            required: true
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                // console.log(key, keyPath);
                // this.$router.push({ path: '/home/' + keyPath.join("/") });
                let name = keyPath.join("/");
                this.addTab(this.getTitle(keyPath), name, '/home/' + name);
            },
            getTitle(keyPath) {
                let title = "";
                for(let i = 0; i < this.menuList[this.index].subMenuList.length; i++) {
                    if(keyPath[0] == this.menuList[this.index].subMenuList[i].menuNode) {
                        title = this.menuList[this.index].subMenuList[i].menuName;
                        if(keyPath.length === 2) {
                            for(let j = 0; j < this.menuList[this.index].subMenuList[i].subMenuList.length; j++) {
                                if(keyPath[1] == this.menuList[this.index].subMenuList[i].subMenuList[j]) {
                                    title = this.menuList[this.index].subMenuList[i].subMenuList[j].menuName;
                                }
                            }
                        }
                    }
                }
                return title;
            },
            // 需要给home添加标签页
            addTab(title, name, path) {
                let map = {
                    title: title,
                    name: name,
                    content: path,
                };
                this.$emit('addTab', map);
            },
        }
    }
</script>

<style>

    h5{
        line-height: normal;
    }

    .el-menu{
        border-right: 0;
    }

    .el-submenu,.el-menu-item{
        text-align: left;
    }

</style>
